<template>
  <div>
    <!--v-model双向绑定数据，输入框变了fistname也变了，fistname变了，输入框也变了-->
    姓：<input type="text" v-model="firstName"><br/>
    名：<input type="text" v-model="lastName"><br/>
    全名：<span>{{ fullName }}</span>
    <button @click="changeFullName()">修改全名</button>
  </div>
</template>

<script lang="ts" setup name = "computed"> 
    import { ref, computed } from 'vue'
    let firstName = ref('张')
    let lastName = ref('三')

    //computed是计算属性，里面写的是一个函数，fullname是一个计算属性的ref
    //因为setup函数中没有this，所以可以用（）=>函数
    //计算属性有缓存，计算一次就会缓存，下次调用的时候会直接返回缓存的值，不会重新计算
    //而如果用方法调用的形式，每次调用都会重新计算，因为方法没有缓存
    // function fullName(){
    //     return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1) + lastName.value
    // }
    //但是这么定义的计算属性只能读不能改 用changeFullName()方法点击按钮不会发生变化
    /*let fullName = computed(() =>{
        return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1) + lastName.value
    })*/

    //这么定义的fullname是一个计算属性，可读可写
    let fullName = computed({
        get(){
            return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1) + lastName.value
        },
        set(val){
            const names = val.split('-')
            firstName.value = names[0]
            lastName.value = names[1]
        }
    })
    //该方法会引起fullName的set方法执行
    function changeFullName(){
        fullName.value = 'li-si'
    }

</script>

<style>

</style>